<script setup>
import { ref } from 'vue'
import { updateUserInfo } from '@/api/user.js'
import 'vant/es/toast/style'
import { showSuccessToast } from 'vant'
defineOptions({
  name: 'personEditForm'
})
const props = defineProps(['userInfo'])
const emit = defineEmits(['togEdit', 'flush'])
const onSubmit = async (val) => {
  const { status } = await updateUserInfo(val)
  if (status === 204) {
    showSuccessToast('更新成功')
    emit('flush')
    emit('togEdit')
  }
}
const user = ref({
  name: props.userInfo.name,
  email: props.userInfo.email,
  phone: props.userInfo.phone
})
</script>

<template>
  <div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="user.name"
          name="name"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '用户名称不能为空' }]"
        />
        <van-field
          v-model="user.phone"
          name="phone"
          label="手机号"
          placeholder="手机号"
        />
        <van-field
          v-model="user.email"
          type="email"
          name="email"
          label="电子邮箱"
          placeholder="电子邮箱"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
        <van-button
          class="my-3"
          round
          block
          type="default"
          native-type="button"
          @click="emit('togEdit')"
        >
          取消编辑
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<style scoped lang="scss"></style>
